ctx.save();
var len  = 15; /* len for draw */
var thick = 2;
var angle = 25;

var actions = { 'F': function(){
    /* draw forward */
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.strokeRect(0, 0, thick, 0 - len);
        //len * (1 / this['level']));
    this.G();
  },
  'G': function(){
    ctx.translate(0, (0 - len));
       //(len * (1 / this['level']))));
  },
  'R': function(){
    ctx.rotate( angle * Math.PI / 180);
  },
  'L': function(){
    ctx.rotate( -1 * angle * Math.PI / 180);
  },
  'level': 1,
  '[': function(){
    this['level'] += 1;
    ctx.save();
  },
  ']': function(){
    this['level'] -= 1;
    if( this['level'] < 1 ){
      console.warn('level has fallen below 1 to ' + this['level']); 
    }
    ctx.restore();
  },
  '|': function(){
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.strokeRect(0, 0, thick, 0 - (len * (1 / this['level'])));
    ctx.translate(0, 0 - (len * (1 / this['level'])));
  }
};

function expand(axiom, times){
  var newAxiom = '';
  for(var i=0; i < axiom.length; i++){
    if(rules[ axiom[i] ] == undefined ){
      newAxiom += axiom[i];
    }else{
      newAxiom += rules[ axiom[i] ];
    }
  }
  if( times > 0){
    return expand(newAxiom, (times -1));
  }else{  
    return newAxiom;
  }
}
function turtleGraphics(axiom){
  console.info("tg " + axiom);
  for(var i=0; i < axiom.length; i++){
    if(actions[ axiom[i] ] == undefined ){
      //console.warn("Ignorning " + axiom[i]);
    }else{
      actions[axiom[i]]();
    }
  }
  console.info("done " + (new Date().getTime() - startTime));
}
startTime = new Date().getTime();
console.info("Starting");

/*
var axiom = 'F[LB]RB';
var rules = {'F': 'FF',
             'B': 'F[LB]RB'}
turtleGraphics(expand(axiom, 3));
*/
var axiom = 'F[LB][RRB]';
var rules = {'F': 'F[LB][RRB]',
             'B': 'GG[LLFF][RFF]'}
//len  = 15; thick = 2; angle = 25;
turtleGraphics(expand(axiom, 6));

ctx.restore();
// JavaScript Document


//Book scratch paper
Big-H
angle: 90
axiom: [F]LLF
rules: F = |[RF][LF]

Two Ys
angle: 45
axiom: [F]4-F
rules: F = |[RF][LF]

Weed-1
angle: 25
axiom: F
rules: F = F[LF]F[RF]F

Tree-3
angle: 20
axiom: F
rules: F = |[LLF][+F] Li F


angle:
axiom:
rules: